<template>
    <view 
		v-show="showWrap"
        :style="pos"
        class="zz-toprightnotice_202008111650"
        :class="[toggle?'slideInDown':'slideOutDown']">
        <!-- 背景图 -->
        <image class="zz-img-fit" :src="baseCommonFileUri+'image/zz-notice-bg.png'"></image>
        <!-- 关闭的图标 -->
        <view class="close" @click="close">
            <text class="template__icon template_icon-colse"></text>
        </view>
        <!-- 内容 -->
        <view class="content">
            点击<text class="fs22">●</text><text class="fs26">●</text><text class="fs22">●</text>添加到我的小程序<br/>
            微信首页下拉即可快速访问
        </view>
    </view>
</template>
<script>
export default {
    props:{
        pos:{
            type:String,
            default:`top:0rpx;right:0rpx;`
        }
    },
    data(){
        return {
            showWrap:true,
            toggle:true
        };
    },
    mounted(){
        let timer = null;
        clearTimeout(timer);
        timer = setTimeout(()=>{
            this.close();
            setTimeout(()=>{
                this.showWrap = false;
            },300);
        },4000);
    },
    methods:{
        close(){
            this.toggle = false;
        }
    }
}
</script>
<style lang="scss">
.zz-toprightnotice_202008111650 {
    position:absolute;
    width:396rpx;
    min-height:134rpx;
    padding:32rpx 48rpx 14rpx 24rpx;
    z-index:99999;
    .zz-img-fit,.close {
        position:absolute;
    }
    /*  */
    .zz-img-fit {
        top:0;
        left:0;
    }
    /*  */
    .close {
        top:24rpx;
        right:14rpx;
        color:#333; 
    }
    /*  */
    .content {
        position:relative;
        line-height:42rpx;
        font-size:24rpx;
        color:#333;
        .fs32 {
            position:relative;
            top:3rpx;
        }
    }
@-webkit-keyframes slideInDown{0%{visibility:visible;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{visibility:visible;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/*  */
@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}
/*  */
&.slideInDown {
    animation:slideInDown .3s ease-in alternate both;
}/*  */
&.slideOutDown {
    animation:slideOutDown .3s ease-in alternate both;
}
}
</style>